<script>
import Header from './Header.vue'
import Footer from './footer.vue'
import qiye_form from '@views/user/register/reg_components/qiye_form_1.vue'
import guanliyuan_form from '@views/user/register/reg_components/guanliyuan_form1_1.vue'
import step2 from '@views/user/register/reg_components/step2.vue'
import register1 from '@views/user/register/register1.vue'
import { regist1, registPost } from '@api/login'
import UserConcat from '@views/user/register/reg_components/userConcat_8.vue'
import QualificationManager from '@views/user/register/reg_components/QualificationManager_4.vue'
import UserManager from '@views/user/register/reg_components/UserManager_7.vue'
import Step5 from '@views/user/register/reg_components/step5.vue'
import Bank9 from '@views/user/register/reg_components/bank9.vue'
import Step3 from '@views/user/register/reg_components/step3.vue'
import Step6 from '@views/user/register/reg_components/step6.vue'
import { axios } from '@/utils/request'
import store from '@/store'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { mapGetters } from 'vuex'
import bindCA from '@views/user/register-legal/components/bindCA.vue'
import UpdateModal from './reg_components/updateModal.vue'
import File10 from './reg_components/file10.vue'
let steps = [
  { id: 1, name: '注册流程' },
  { id: 2, name: '供应商/投标人/受让方概况' },
  { id: 3, name: '证照信息' },
  { id: 4, name: '资质及质量体系认证' },
  { id: 5, name: '业绩证明' },
  { id: 6, name: '获奖证书' },
  { id: 7, name: '项目经理/总监' },
  { id: 8, name: '联系人信息' },
  { id: 9, name: '银行账户' },
  { id: 10, name: '诚信承诺书等资料' },
]
export default {
  components: {
    bindCA,
    Step6,
    Bank9,
    Step5,
    UserManager,
    Step3,
    QualificationManager,
    UserConcat,
    Header,
    step2,
    Footer,
    qiye_form,
    guanliyuan_form,
    UpdateModal,
    File10,
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {
    if (this.userInfo?.id) {
      this.sysUserId = this.userInfo.id
      this.getInfo()
    }
    if (this.isUserInfo) {
      steps[0].name = '个人信息'
    }
  },
  data() {
    return {
      visible: false,
      isOpen: false,
      legalCode: null,
      user: null,
      subjectId: '',
      sysUserId: '',
      registStep: 1,
      steps: steps,
      currentStep: Number(this.$route.query.step || 1),
      isUserInfo: this.$route.path === '/userInfo',
      isFix: !this.isUserInfo,
    }
  },
  methods: {
    getInfo() {
      axios.post('/register/subjectLegal/queryByInfo', { sysUserId: this.sysUserId }).then(r => {
        this.legalCode = r.result.legalCode
        this.registStep = r.result.registStep
        this.subjectId = r.result.subjectId
        this.currentStep = r.result.registStep + 1
        this.user = r.result
      })
    },
    stepsChange(v) {
      if (v == 1) {
        this.steps = steps
      } else {
        this.steps = [
          { id: 1, name: this.isUserInfo ? '个人信息' : '注册流程' },
          { id: 9, name: '银行账户' },
          { id: 10, name: '诚信承诺书等资料' },
        ]
      }
    },
    submit(forms, url, formatParams) {
      const promises = []
      forms.forEach(item => {
        if (!item.validateForm) {
          return this.currentStep++
        }
        promises.push(item.validateForm())
      })
      Promise.all(promises).then(v => {
        console.log(v)
        let obj = {}
        if (Array.isArray(v)) {
          v.forEach(item => {
            obj = { ...obj, ...item }
          })
        } else {
          obj = v
        }
        obj.subjectId = this.user?.subjectId
        formatParams && formatParams(obj)

        axios
          .post(url, obj)
          .then(r => {
            if (r.result.token) {
              store.commit('SET_TOKEN', r.result.token)
            }
            if (r.result.legalCode) {
              this.legalCode = r.result.legalCode
            }
            this.subjectId = r.result.subjectId
            this.sysUserId = r.result.sysUserId
            if (this.sysUserId) {
              this.getInfo()
            } else {
              this.currentStep++
            }

            this.registStep = r.result.registStep
          })
          .catch(err => {
            forms.forEach(item => {
              item?.error?.(err)
            })
            console.log(err)
          })
      })
    },
    next() {
      if (this.currentStep > 9) {
        this.$modal.success({
          title: '注册成功',
          content: '注册成功，请登录',
          okText:'去登录',
          cancelText:null,
          onOk: () => {
            this.$emit('next')
          },
        })

      }
      if (this.currentStep > 1) {
        this.submit([this.$refs['step' + this.currentStep]], '/register/subjectLegal/registNext', obj => {
          obj.subjectId = this.subjectId
          obj.legalCode = this.legalCode
          obj.currentStep = this.currentStep
          obj.registStep = this.registStep
          Object.keys(obj).forEach(k => {
            if (Array.isArray(obj[k])) {
              obj[k] = obj[k].join()
            }
          })
        })
      } else {
        this.submit([this.$refs.qiye, this.$refs.gly], '/register/subjectLegal/regist', obj => {
          obj.bidderCodeType = obj.bidderCodeType.join()
        })
      }
    },
    clickMenu(id) {
      // if (this.registStep >= id - 1) {
      if(this.legalCode){
        this.currentStep = id
      }else{
        this.$message.error('请先填写基础信息')
      }

      // }
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
        }
      })
    },
    updateOnok(){
      this.getInfo();
      this.isOpen = false;
    }
  },
}
</script>

<template>
  <div class="block_1 flex-col">
    <div class="group_23 flex-row justify-between" v-if="!isUserInfo">
      <div class="text-wrapper_1 flex-col">
        <span class="text_1">阅读注册协议</span>
      </div>
      <div class="text-wrapper_2 flex-col">
        <span class="text_2">填写相关信息</span>
      </div>
      <div class="text-wrapper_3 flex-col">
        <span class="text_3">注册完成</span>
      </div>
    </div>
    <div class="box_3 flex-row justify-between" :class="isUserInfo ? 'info' : ''">
      <div class="group_2 flex-col">
        <div class="text-wrapper_4">
          <span
            v-for="step in steps"
            :key="step.id"
            :class="{ active: currentStep === step.id || registStep > step.id - 1, paragraph_2: true }"
            @click="clickMenu(step.id)"
          >
            {{ step.name }}
          </span>
        </div>
      </div>
      <div class="group_3 flex-col">
        <div class="box_4 flex-row justify-between">
          <div class="flex-row justify-between">
            <div class="box_5 flex-col"></div>
            <span class="text_5"
              >{{ (steps[currentStep - 1] || steps[currentStep - 8]).name
              }}<!--供应商/投标人/受让方登录信息--></span
            >
          </div>
          <div class="" style="flex:1;text-align: left;" v-if="isUserInfo">
            <a-button type="link" @click="isFix = !isFix">编辑</a-button>
          </div>
          <div v-if="isUserInfo" class="" style="flex:1;text-align: left;">
            <a-button type="link" @click="visible = true">{{user.isCa==0? '绑定CA':'重绑CA' }}</a-button>
          </div>
          <div class="" v-if="isUserInfo">
            当前等级：{{ user && user.memberLevel }}级
            <a-button v-if="user.memberState != 1" type="link" @click="isOpen = true">
              去升级
            </a-button>
            <a-button v-else type="link">
              申请审核中
            </a-button>
          </div>

          <!--          <a-button class="float:right" @click="isOpen = true">用户升级</a-button>-->
        </div>
        <div class="box_6 flex-col"></div>
        <div class="box_7 flex-row" style="flex-wrap:wrap;width:100%;padding-right:40px;">
          <!--          <div class="mask" v-if="isUserInfo && isFix"></div>-->
          <qiye_form
            :canFix="!(isUserInfo && isFix)"
            :user="user"
            @region-changed="stepsChange"
            v-if="currentStep === 1"
            ref="qiye"
          ></qiye_form>
          <guanliyuan_form
            :canFix="!(isUserInfo && isFix)"
            :user="user"
            v-if="currentStep === 1"
            ref="gly"
          ></guanliyuan_form>
          <step2 :canFix="!(isUserInfo && isFix)" :user="user" v-if="currentStep === 2" ref="step2"></step2>
          <step3 :canFix="!(isUserInfo && isFix)" :user="user" v-if="currentStep === 3" ref="step3"></step3>
          <QualificationManager
            :canFix="!(isUserInfo && isFix)"
            :legalCode="legalCode"
            v-if="currentStep === 4"
            ref="step4"
          ></QualificationManager>
          <step5
            style="flex:1;"
            :canFix="!(isUserInfo && isFix)"
            :legalCode="legalCode"
            v-if="currentStep === 5"
            ref="step5"
          ></step5>
          <step6
            style="flex:1;"
            :canFix="!(isUserInfo && isFix)"
            :legalCode="legalCode"
            v-if="currentStep === 6"
            ref="step6"
          ></step6>
          <UserManager
            style="flex:1;"
            :canFix="!(isUserInfo && isFix)"
            :legalCode="legalCode"
            v-if="currentStep === 7"
            ref="step7"
          ></UserManager>
          <userConcat
            style="flex:1;"
            :canFix="!(isUserInfo && isFix)"
            :legalCode="legalCode"
            v-if="currentStep === 8"
            ref="step8"
          ></userConcat>
          <bank9 :canFix="!(isUserInfo && isFix)" :legalCode="legalCode" v-if="currentStep === 9" ref="step9"></bank9>
          <File10
            :canFix="!(isUserInfo && isFix)"
            :legalCode="legalCode"
            v-if="currentStep === 10"
            ref="step10"
          ></File10>
        </div>
        <div v-if="!(isUserInfo && isFix)" class="text-wrapper_5 flex-col" @click="next">
          <span class="text_6">保存，并下一步</span>
        </div>
        <div v-if="!isUserInfo" class="text-wrapper_6">
          <span class="paragraph_6">温馨提示:<br /></span>
          <span class="paragraph_7"
            >如果您在注册过程中没有提交而关闭或退出了系统，您可以随时从登录界面登录，继续完成您的注册信息填写。<br />注册时请提前准备如下证照原件的扫描件或影印件:组织机构代码证，营业执照，国税、地税登记证(老版)，税务登记证(新版)，<br />社保登记证(非必填项)，供应商/投标人/受让方相关资质，任何有副本的证照或资质只能上传副本。注意:一旦您提交了注册<br />信息，再次登录后，您只能查看提交过注册信息和等待审核结果。<br
          /></span>
        </div>
        <!--        <div class="box_8 flex-col"></div>-->
      </div>
    </div>
    <update-modal :user="user" :legal-code="legalCode" :visible="isOpen" @on-ok="updateOnok"></update-modal>
    <a-modal
      title="CA绑定"
      :visible="visible"
      :footer="null"
      :width="800"
      :close-icon="false"
      :maskClosable="false"
      @cancel="visible = false"
    >
      <bindCA />
    </a-modal>
  </div>
</template>
<style lang="less">
.ant-calendar-footer .ant-calendar-footer-btn {
  display: flex;
  justify-content: center;
}
</style>
<style scoped lang="less">
/deep/ .ant-form {
  width: 100%;
}
/deep/ .ant-btn-link {
  color: #1890ff;
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}
.block_1 .box_3.info {
  margin: 0;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.justify-between {
  justify-content: space-between;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.block_1 {
  position: relative;
  width: 1200px;
  background: url('../../../assets/psvd0qudytvs7di0zcdaspsre3dxhkebra423364a-8376-4e3f-92f6-e8c650b58cd5.png') 100%
    no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  .group_23 {
    width: 1140px;
    height: 68px;
    margin: 30px 0 0 30px;
    .text-wrapper_1 {
      height: 68px;
      background: url('../../../assets/psnbgzk95h74drbaz9hsmw6l83vmjfiup82377d7f-67e6-4b9d-b310-0dcb380fe1d0.png') 100%
        no-repeat;
      background-size: 100% 100%;
      color: rgba(102, 102, 102, 1);
      width: 379px;
      .text_1 {
        width: 140px;

        font-size: 24px;
        font-family: AlibabaPuHuiTi-Regular;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 28px;
        margin: 22px 0 0 120px;
      }
    }
    .text-wrapper_2 {
      height: 68px;
      background: url('../../../assets/ps0hpp75g3ufcgx8xwulx0qc9qex5vybsv61395fd6-7fcb-4d86-bba7-aa62de00dbf4.png') 100%
        no-repeat;
      color: rgba(255, 255, 255, 1);
      background-size: 100% 100%;
      margin-left: 1px;
      width: 379px;
      .text_2 {
        width: 140px;
        height: 23px;
        overflow-wrap: break-word;

        font-size: 24px;
        font-family: AlibabaPuHuiTi-Regular;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 28px;
        margin: 22px 0 0 119px;
      }
    }
    .text-wrapper_3 {
      height: 68px;
      background: url('../../../assets//psmbar0un8xfdnbpxjg5ktcnpva1w9f2vre6603fc9-c43d-416b-8073-82b961d17e34.png')
        100% no-repeat;
      background-size: 100% 100%;
      margin-left: 1px;
      width: 380px;
      .text_3 {
        width: 93px;
        height: 23px;
        overflow-wrap: break-word;
        color: rgba(102, 102, 102, 1);
        font-size: 24px;
        font-family: AlibabaPuHuiTi-Regular;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 28px;
        margin: 22px 0 0 144px;
      }
    }
  }
  .box_3 {
    width: 1140px;
    margin: 15px 0 17px 30px;
    .group_2 {
      background-color: rgba(255, 255, 255, 1);
      position: relative;
      width: 191px;
      height: 546px;
      align-items: center;
      .block_1 {
        background-color: rgba(174, 46, 51, 1);
        width: 191px;
        height: 2px;
        margin-top: 42px;
      }
      .image_1 {
        width: 197px;
        height: 50px;
        margin: 49px 0 403px 0;
      }
      .text-wrapper_4 {
        width: 100%;
        height: 497px;
        overflow-wrap: break-word;
        font-size: 0;
        font-family: AlibabaPuHuiTi-Bold;
        font-weight: 700;
        text-align: left;
        line-height: 48px;
        > span {
          display: block;
        }
        .text_4 {
          overflow-wrap: break-word;
          color: rgba(174, 46, 51, 1);
          font-size: 24px;
          font-family: AlibabaPuHuiTi-Bold;
          font-weight: 700;
          text-align: left;
          line-height: 48px;
        }
        .paragraph_2 {
          font-weight: bold;
          padding-left: 15px;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 14px;
          font-family: AlibabaPuHuiTi-Regular;
          text-align: left;
          line-height: 48px;
          &.active {
            color: #fff;
            background-color: rgba(174, 46, 51, 1);
          }
        }
      }
    }
    .group_3 {
      background-color: rgba(255, 255, 255, 1);
      position: relative;
      width: 929px;

      .box_4 {
        height: 43px;
        align-items: center;
        .box_5 {
          background-color: rgba(174, 46, 51, 1);
          width: 4px;
          height: 43px;
        }
        .text_5 {
          margin-right: 30px;
          height: 18px;
          margin-left: 8px;
          overflow-wrap: break-word;
          color: rgba(174, 46, 51, 1);
          font-size: 18px;
          font-family: AlibabaPuHuiTi-Bold;
          font-weight: 700;
          text-align: left;
          white-space: nowrap;
          line-height: 45px;
        }
      }
      .box_6 {
        background-color: rgba(202, 202, 202, 1);
        width: 929px;
        height: 1px;
      }
      .box_7 {
        flex: 1;
        position: relative;
        margin: 31px 0 0 29px;
        .mask {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 99;
        }
        .paragraph_5 {
          width: 807px;
          height: 351px;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-family: AlibabaPuHuiTi-Regular;
          font-weight: normal;
          text-align: left;
          line-height: 48px;
        }
        .block_2 {
          background-color: rgba(255, 255, 255, 1);
          width: 635px;
          height: 34px;
          border: 1px solid rgba(202, 202, 202, 1);
          margin: 85px 0 0 -641px;
        }
        .block_3 {
          background-color: rgba(255, 255, 255, 1);
          width: 385px;
          height: 34px;
          border: 1px solid rgba(202, 202, 202, 1);
          margin: 181px 6px 0 -385px;
        }
      }
      .text-wrapper_5 {
        background-color: rgba(174, 46, 51, 1);
        border-radius: 6px;
        height: 40px;
        width: 200px;
        margin: 57px 0 0 365px;
        .text_6 {
          width: 110px;
          height: 16px;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 16px;
          font-family: AlibabaPuHuiTi-Regular;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 16px;
          margin: 12px 0 0 45px;
        }
      }
      .text-wrapper_6 {
        width: 868px;
        height: 160px;
        overflow-wrap: break-word;
        font-size: 0;
        font-family: AlibabaPuHuiTi-Bold;
        font-weight: 700;
        text-align: left;
        line-height: 16px;
        margin: 49px 0 80px 31px;
        .paragraph_6 {
          width: 868px;
          height: 160px;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-family: AlibabaPuHuiTi-Bold;
          font-weight: 700;
          text-align: left;
        }
        .paragraph_7 {
          width: 868px;
          height: 160px;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-family: AlibabaPuHuiTi-Regular;
          font-weight: normal;
          text-align: left;
          line-height: 36px;
        }
      }
      .box_8 {
        background-color: rgba(255, 255, 255, 1);
        position: absolute;
        left: 115px;
        top: 66px;
        width: 715px;
        height: 34px;
        border: 1px solid rgba(202, 202, 202, 1);
      }
    }
  }
}
</style>
